/**
 *Filename: goods_detail.scss
 *Author: xhh
 *Description: 商品详情页，还没有编译的文件，用的是sass语法写
 *Date: 2018.03.29
 */
// 引入统一，清除各浏览器的默认和差异性
@import "reset.scss";
// 引入公用
@import "base.scss";
/* 商品详情页主体 start */
.diamond-detail-container {
    margin-top: 4%;
    .diamond-detail-header {
        h2 {
            font-size: 2rem;
            font-weight: 500;
            line-height: 3;
            color: #7d7d7d;
        }
        span {
            padding-left: 1rem;
            font-size: 1.8rem;
            text-transform: uppercase;
        }
    }
    // 详情内容
    .diamond-detail-body {
        width: 1200px;
        .diamond-detail-info {
            display: flex;
            justify-content: space-between;
        }
        // 钻石展示
        .diamond-show {
            position: relative;
            width: 45%;
            padding: 0 6% 0 4%;
            display: flex;
            flex-direction: column;
            .diamond-img {
                height: 22rem;
                width: 550px;
                margin: 0 auto;
                overflow: hidden;
                // 普通图片
                .common-img {
                    display: block;
                    position: relative;
                    margin: 0 auto;
                    height: 350px;
                    max-width: 64%;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                // 全景图
                .panoramic-img {
                    display: none;
                    #panoramic_img{
                        width: 100%!important;
                        height: 350px!important;
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position: center;
                        margin: 0 auto;
                        cursor: move;
                        position: relative;
                        z-index: 10001;
                        img {
                            max-width: 100%;
                        }
                    }
                }
            }
            // 缩略图列表
            .thumb-list {
                display: flex;
                justify-content: space-around;
                margin-top: 1.4rem;
                .thumb-item {
                    width: 20%;
                    cursor: pointer;
                    box-sizing: border-box;
                    height: 6.5rem;
                    img {
                        max-width: 100%;
                        max-height: 100%;
                    }
                    &:hover {
                        border: 2px solid #ccc;
                    }
                }
                .active {
                    border: 2px solid #ccc;
                }
            }
        }
        // 钻石描述
        .diamond-des {
            width: 43%;
            color: #777;
        }
        // 标题
        .diamond-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 3;
            h3 {
                font-size: 1.2rem;
                font-weight: 500;
                letter-spacing: 2px;
                text-transform: uppercase;
            }
            .icon-instock {
                display: inline-block;
                width: 20px;
                height: 20px;
                margin-right: .4rem;
                background: url(../img/goods/detail/icon_instock.png) no-repeat center;
                background-size: cover;
            }
            span {
                display: flex;
                align-items: center;
                text-transform: uppercase;
                font-size: .75rem;
            }
            
        }
        // 钻石文字描述
        .diamond-txt {
            line-height: 1.4;
        }
        // 钻石价格
        .diamond-price {
            font-size: 1.8rem;
            line-height: 2.6;
            letter-spacing: 3px;
            em {
                color: #d7aa59;
            }
            del {
                color: #999;
            }
        }
        // 钻石参数
        .diamond-param {
            width: 94%;
            padding: .8rem 0 .8rem 1rem;
            line-height: 1.8;
            border-top: 1px solid #919191;
            border-bottom: 1px solid #919191;
            // 参数列表
            .param-list {
                display: flex;
                flex-flow: wrap;
            }
            // 每个参数
            .param-item {
                width: 25%;
                b {
                    padding-left: .4rem;
                    font-weight: 500;
                    color: #303030;
                }
            }
        }
        // 库存地
        .diamond-origin {
            margin: 1.2rem 0;
            span {
                display: flex;
                align-items: center;
            }
            .icon-USA {
                display: inline-block;
                width: 44px;
                height: 30px;
                margin: 0 1rem;
                background: url(../img/goods/detail/icon_USA.jpg) no-repeat center;
                background-size: cover;
            }
        }
        // 提示
        .diamond-tips {
            display: flex;
            align-items: center;
            font-size: .875rem;
            letter-spacing: 2px;
            span {
                display: flex;
                align-items: center;
            }
            .icon-dist {
                display: inline-block;
                width: 19px;
                height: 19px;
                margin:0 .8rem;
                background: url(../img/goods/detail/icon_dist.png) no-repeat center;
                background-size: cover;
            }
        }
        // 操作
        .diamond-action {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 1.3rem 0;
            // 钻石数量
            .num {
                display: flex;
                align-items: center;
                padding: .8rem 1.4rem;
                background-color: #f8f8f8;
                i {
                    display: inline-block;
                    width: 8px;
                    height: 5px;
                    padding: .5rem;
                    background-size: cover;
                    cursor: pointer;
                }
                .icon-reduce {
                    background: url(../img/goods/detail/icon_reduce.png) no-repeat center;
                }
                .icon-add {
                    background: url(../img/goods/detail/icon_add.png) no-repeat center;                    
                }
                input {
                    width: 1.4rem;
                    text-align: center;
                    font-size: .875rem;
                    border: 0 none;
                    outline: none;
                    background-color: transparent;
                }
            }
            a {
                padding: 1rem 1.8rem;
                margin-left: .6rem;
                text-transform: uppercase;
                letter-spacing: 4px;
                font-size: .875rem;
            }
            // 添加购物车按钮
            .add-to-cart-btn {
                color: #777;
                background-color: #f8f8f8;
                &:hover {
                    text-decoration: underline;
                }
            }
            // 购买按钮
            .pay-for-it-btn {
                background-color: #343434;
                color: #fff;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        // 服务
        .diamond-service {
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-transform: uppercase;
            font-size: .875rem;
            letter-spacing: 2px;
            // 电话图标
            .icon-tel {
                display: inline-block;
                width: 19px;
                height: 19px;
                margin:0 2.4rem 0 1rem;
                background: url(../img/goods/detail/icon_tel.png) no-repeat center;
                background-size: cover;
            }
            span {
                display: flex;
                align-items: center;
            }
            // 收藏按钮
            button {
                background-color: transparent;
                border: 1px solid #d7d7d7;
                padding: 1.4rem;
                background-image: url(../img/goods/detail/icon_heart.png);
                background-repeat: no-repeat;
                background-position: 13px 15px;
                cursor: pointer;
                outline: none;
            }
            .active {
                background-position: 13px -25px;
            }
        }
        .diamond-detail-intro {
            margin-top: 3rem;
        }
        // 切换按钮
        .intro-btn {
            button {
                margin-right: 1rem;
                border: 0 none;
                line-height: 3;
                letter-spacing: 1px;
                text-transform: uppercase;
                color: #777;
                outline: none;
                background-color: transparent;
                cursor: pointer;
                &.active {
                    background:url(../img/goods/detail/icon_down.png) no-repeat top center;
                    color: #343434;
                }
                &:hover {
                    color: #343434;
                }
            }
        }
        .intro-content {
            border: 1px solid #cdcdcd;
            padding-bottom: 2.4rem;
            color: #787878;
            // 介绍描述
            .intro-des-box {
                padding-bottom: .4rem;
                >div {
                    display: none;
                }
                .selected {
                    display: flex;
                }
            }
            .intro-des {
                display: flex;
                position: relative;
                padding: 2rem 2.5rem;
                &::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 2.5rem;
                    width: 90%;
                    height: 1px;
                    background-color: #cdcdcd;
                }
            }
            // 钻石参数信息
            .info-list {
                display: flex;
                flex-flow: wrap;
                justify-content: space-around;
                width: 56%;
            }
            // 每个参数
            .info-item {
                width: 33.33%;
                padding: .6rem 0;
            }
            // 钻石证书
            .intro-report {
                position: relative;
                display: flex;
                justify-content: space-between;
                width: 45%;
                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    height: 110%;
                    width: 1px;
                    top: -5%;
                    border-left: 1px solid #cdcdcd;
                }
                // 证书图片
                .report-img {
                    width: 48%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    img {
                        max-width: 60%;
                        border: 1px solid #cdcdcd;
                    }
                }
                // 证书文字说明
                .report-txt {
                    width: 52%;
                    h4 {
                        font-size: 1.1rem;
                        letter-spacing: 3px;
                    }
                    span {
                        letter-spacing: 0;
                        font-size: .875rem;
                        text-transform: uppercase;
                    }
                    p {
                        margin-top: 1rem;
                        text-indent: 2rem;
                        font-size: .875rem;
                        line-height: 1.4rem;
                    }
                }
            }
        }
        // 我们的承诺
        .intro-pro {
            position: relative;
            display: flex;
            &::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 2.5rem;
                width: 90%;
                height: 1px;
                background-color: #cdcdcd;
            }
            // .pro-txt-img {
            //     display: flex;
            // }
            // .pro-txt {
            //     width: 70%;
            //     padding: 2rem 0 2rem 2.5rem;
            //     height: 187px;
            //     h4 {
            //         margin-bottom: .4rem;
            //         font-size: 1.3rem;
            //         font-weight: normal;
            //         text-transform: uppercase;
            //     }
            //     p {
            //         text-indent: 2rem;
            //         font-size: .875rem;
            //         line-height: 1.5;
            //     }
            // }
            // .pro-img {
            //     width: 26%;
            //     img {
            //         max-width: 96%;
            //         max-height: 100%;
            //     }
            // }
            // .pro-service {
            //     position: relative;
            //     padding: 2rem 2.5rem 0 0;
            //     &::before {
            //         content: '';
            //         position: absolute;
            //         top: 10%;
            //         left: 0;
            //         width: 1px;
            //         height: 80%;
            //         background-color: #dadada;
            //     }
            //     ul{
            //         display: flex;
            //         flex-direction: column;
            //         padding: 0 1rem;
            //     }
            //     li {
            //         &:first-child {
            //             margin-bottom: 1.5rem;
            //         }
            //         h3 {
            //             display: flex;
            //             align-items: flex-start;
            //             text-transform: uppercase;
            //             font-weight: 500;
            //             font-size: 1.2rem;
            //             letter-spacing: 1px;
            //         }
            //         p {
            //             margin-top: -1rem;
            //             font-size: .875rem;
            //             text-indent: 63px;
            //             line-height: 1.4;
            //         }
            //     }
            //     i {
            //         display: inline-block;
            //         width: 47px;
            //         height: 44px;
            //         margin-right: .6rem;
            //         background-position: center;
            //         background-repeat: no-repeat;
            //         background-size: cover;
            //     }
            //     .icon-15 {
            //         background-image: url(../img/goods/detail/icon_15.png);
            //     }
            //     .icon-diamond {
            //         background-image: url(../img/goods/detail/icon_diamond.png);
            //     }
            // }
        }
        // 部分标题说明
        .intro-confirm-param {
            h3 {
                position: relative;
                font-size: 1.2rem;
                line-height: 2.4;
                &::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 4rem;
                    height: 2px;
                    background-color: #7d7d7d;
                }
            }
        }
        // 其他钻石参数
        .intro-confirm-param {
            display: flex;
            overflow: hidden;
            margin-top: .5rem;
            padding: 0 2.5rem;
            .param {
                width: 30%;
                padding-right: 5%;
                margin-top: 1rem;
                ul {
                    display: flex;
                    margin-top: 1.4rem;
                    width: 100%;
                    li {
                        border: 1px solid #aaa;
                        border-right: 0 none;
                        text-align: center;
                        font-weight: 600;
                        flex-grow: 1;
                        line-height: 3;
                        &:last-child {
                            border-right: 1px solid #aaa;
                        }
                        &.on {
                            background-color: #bbb;
                            color: #fff;
                        }
                    }
                }
            }
            
            // 颜色
            .diamond-cut {
                padding-right: 0;
            }
            // 进度条盒子
            .slider-box {
                margin-top: 1.6rem;
                .input-value {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 1.6rem;
                    width: 340px;
                    div {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 4.6rem;
                        border: 1px solid #d6d6d6;
                    }
                    input {
                        background-color: transparent;
                        max-width: 60%;
                        line-height: 1.6;
                        font-size: 1.1rem;
                        text-align: center;
                        border: none;
                        outline: none;
                    }
                }
            }
            .slider {
                position: relative;
                width: 340px;
                height: 4px;
                background-color: #d6d6d6;
                .bar1 {
                    width: 18px;
                    height: 18px;
                    background-color: #7d7d7d;
                    position: absolute;
                    top: -7px;
                    left: 0;
                }
                .bar2 {
                    width: 18px;
                    height: 18px;
                    background-color: #7d7d7d;
                    position: absolute;
                    top: -7px;
                    right: 0;
                }
                .mask-slider {
                    position: absolute;
                    left: 0;
                    right: 0;
                    height: 100%;
                    background-color: #7d7d7d;
                }
            }
        }
        .intro-des-content {
            margin-top: 3rem;
            height: 500px;
            background-color: #ccc;
        }
    }
    // 底部相关推荐
    .diamond-detail-footer {
        margin-top: 2rem;
        margin-bottom: 1rem;
        background: linear-gradient(#fff, #e3e3e3 50%,#FAFAFA,#fff);  
        .related-diamond-title {
            position: relative;
            padding: 2rem 0;
            text-align: center;
            font-size: 1.5rem;
            color: #000;
            text-transform: uppercase;
            &::before {
                content: '';
                position: absolute;
                bottom: 1.6rem;
                left: 49%;
                transform: translate(-50%,0);
                width: 1.4rem;
                height: 1px;
                background-color: #888;
            }
        }
        .related-diamond-list {
            display: flex;
        }
        .related-diamond-item {
            width: 25%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            // 图片
            .diamond-img {
                overflow: hidden;
                img {
                    max-width: 100%;
                    &:hover {
                        transform: scale(1.1,1.1);
                        transition: all .3s linear;
                        cursor: pointer;    
                    }
                }
            }
            // 钻石名字
            .diamond-name {
                font-weight: 500;
                letter-spacing: 1px;
                text-transform: uppercase;
                margin-top: 1rem;
                margin-bottom: .2rem;
                font-size: .875rem;
                a {
                    color: #303030;
                    &:hover {
                        text-decoration: underline;
                        font-weight: 500;
                    }
                }
            }
            // 价格
            .diamond-price {
                font-size: .875rem;
                color: #868f46;
            }
            // 添加到购物车
            .diamond-actioin {
                line-height: 3.4;
                border-top: 1px solid #cdcdcd;
                border-bottom: 1px solid #cdcdcd;
                padding: 0 1.2rem;
                margin-top: 1rem;
                font-size: .65rem;
                text-transform: uppercase;
                &:hover {
                    border-top: 1px solid #222;
                    border-bottom: 1px solid #222;
                    cursor: pointer;;
                }
            }
        }
    }
}
/* 商品详情页主体 end */
